<template>
	<div style="background-color: #f5f8fa;">
		<div class="card bg-dark text-dark ">
			<img src="https://www.fluxmq.com/static/img/page-bg.047ca71e.png" class="card-img" alt="...">
			<div class="card-img-overlay">
				<h2 class="card-text">
					重磅更新，极致体验</h2>
			</div>
		</div>
		<div class=" container">
			<div class="card border d-flex justify-content-center align-self-center align-content-center m-4" style="">
				<ul class="list-group list-group-flush">
					<li class="list-group-item p-0 m-0  d-flex justify-content-center align-content-center align-self-center"
						style=" width: 100%; height:auto;line-height: 50px;">
						<div class="row d-flex  justify-content-center align-content-center align-self-center"
							style="width: 100%;">
							<div style="border-right: 1px solid rgba(0,0,0,.125);"
								class="pr-3  col-md-5 version col-12  mb-md-0 d-flex justify-content-md-center justify-content-start align-self-center">
								<img class="mr-3" src="https://www.fluxmq.com/static/img/version.31a61d19.svg" alt="">
								<div>FluxMQ-2.0.10</div>
								<img class="" style="vertical-align: top;
    max-width: 100%; position: absolute;right: 0%;top: 0%;" src=" https://www.fluxmq.com/static/img/new1.b44696d4.svg"
									alt="">
							</div>
							<!-- <div class="col-md-4">|</div> -->
							<div style="width: 100%;" class="ml-4 col-md-5 col-12 text-left text-md-center ">
								发布时间：2023-12-21</div>

						</div>
					</li>
					<li class="list-group-item">
						<div class="row">
							<div class="col text-left m-4">下载资源</div>
						</div>
						<div class="row d-flex  my-3 justify-content-md-center">
							<div class="col-md-3 col-8  mb-4 mb-md-0 d-flex pl-4 pl-md-0 justify-content-md-center justify-content-col-start mx-3 p-2"
								style=" background-color: #eef3ff;border-radius: 15px; " v-for="item in dowList"
								:key="item.text">
								<div class="d-flex p-1  align-items-center" style="cursor: pointer;">
									<img class="mr-3" :src="item.img" alt="">
									<div style="font-size: 1vw;" class="d-none d-md-block">{{ item.text }}</div>
									<div style="font-size: 3vw;" class="d-block d-md-none">{{ item.text }}</div>
								</div>
							</div>

						</div>
					</li>
				</ul>
				<div class="card ">
					<div class="row text-left d-flex flex-column m-4">
						<div class="col">更新日志</div>
						<div class="col p-0 m-0">
							<ul class="mt-3">
								<li style="font-size:1em" v-for="(item, index) in logList" :key="index">{{ item }}
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>


		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			dowList: [
				{ img: 'https://www.fluxmq.com/static/img/down.6144336b.svg', text: 'Linux安装', dowUrl: '' },
				{ img: 'https://www.fluxmq.com/static/img/down.6144336b.svg', text: 'Windows安装', dowUrl: '' },
				{ img: 'https://www.fluxmq.com/static/img/down.6144336b.svg', text: 'MacOS安装', dowUrl: '' }
			],
			logList: ['提供大批量数据路由压缩等功能',
				'支持Web管理会话消息、保留消息、延迟消息以及数据持久化',
				'Web配置页面配置持久化',
				'新增LOG数据源，数据写入独立LOG文件',
				'新增JSON函数，用户处理嵌套的JSON数据格式',
				'新增协议扩展数据格式，用户统一转发第三方扩展协议',
				'基于FluxMQ MQTT协议拓展多协议模块、提供同一的连接订阅管理能力'
			]
		}
	}

}
</script>

<style lang="scss" scoped>
.card {
	background-color: #fff;
	border: none;
	position: relative;

	.card-text {
		position: absolute;
		margin-top: 25%;
		left: 50%;
		transform: translate(-50%, 0);
		white-space: nowrap;
		font-size: 2vw;

	}
}

.container {
	padding: 5% 0 10% 0;
	// background-color: #fff
}
</style>